<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Message wall</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <main id="container">
        <div class="line1">
            <div class="mlogo"></div>
            <span class="t">把小秘密都藏在这里吧</span>
        </div>
        <a href="show.html"><button class="ibtn">查留言</button></a>
        <a href="write.html"><button class="ibtn">写留言</button></a>
    </main>
	<script>
		function setMaxWidth() {
		            var container = document.getElementById('container');
		            if (window.innerWidth > 400) {
		                container.style.maxWidth = '350px';
						var leftMargin = (window.innerWidth - 400) / 2;
						container.style.marginLeft = leftMargin + 'px';
		            } else {
		                container.style.maxWidth = 'none';
						container.style.marginLeft = 'none';
		            }
		        }
		
		        // 初始化时调用一次，并在窗口大小改变时触发
		        setMaxWidth();
		        window.addEventListener('resize', setMaxWidth);
	</script>
</body>
</html>